<template>
  <div class="selectDiscount">
      <div class="selectDiscountNavBar">
          <van-nav-bar title="选择优惠券" left-arrow @click-left="goback">
          </van-nav-bar>
      </div>
      <div class="selectDiscountInfo" v-for="(selectDiscountTwenty,twenty) in selectDiscountTwenty" :key="twenty">
            <van-radio></van-radio>
        <div class="selectDiscountLeft">
          <div class="selectDiscountPrice">
              <span>{{selectDiscountTwenty.price}}</span>
          </div>
          <div class="selectDiscountCon">
              <span>{{selectDiscountTwenty.con}}</span>
          </div>
        </div>
          <div class="selectDiscountRight">
              <div class="selectDiscountTitle">
                  <span>{{selectDiscountTwenty.title}}</span>
              </div>
              <div class="selectDiscountTime">
                  <span>{{selectDiscountTwenty.time}}</span>
              </div>
              <div class="selectDiscountSource">
                  <span>{{selectDiscountTwenty.source}}</span>
              </div>
          </div>
      </div>
      <div class="use">
          <van-button color="#00C657">立即使用</van-button>
      </div>
  </div>
</template>

<script>
export default {
    name: "selectDiscount",
    data(){
        return{
            radio: '1',
            selectDiscountTwenty:[
                {"price":"￥20",
                 "con":"满100元使用",
                 "title":"新人优惠券",
                 "time":"使用日期无限",
                 "source":"平台发放",
                },
                {"price":"￥20",
                 "con":"满100元使用",
                 "title":"新人优惠券",
                 "time":"使用日期无限",
                 "source":"平台发放",
                },
                {"price":"￥20",
                 "con":"满100元使用",
                 "title":"新人优惠券",
                 "time":"使用日期无限",
                 "source":"平台发放",
                },
            ],
        }
    },
    methods:{
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>

<style scoped>
.selectDiscountInfo{
    display: flex;
    margin-top: 30px;
    margin-left: 12px;
}
.selectDiscountLeft{
    width:110px;
    height:100px;
    background:linear-gradient(0deg,rgba(140,83,255,1),rgba(228,100,255,1));
    border-radius:2px;
    margin-left: 20px;
}
.selectDiscountPrice{
    text-align: center;
    margin-top: 25px;
}
.selectDiscountPrice span{
    font-size:25px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
}
.selectDiscountCon{
    text-align: center;
    margin-top: 12px;
}
.selectDiscountCon span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
}
.selectDiscountRight{
    margin-left: 20px;
    margin-top: 15px;
}
.selectDiscountTitle{

}
.selectDiscountTitle span{
    font-size:16px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:20px;
}
.selectDiscountTime{
    margin-top: 15px;
}
.selectDiscountTime span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(169,174,192,1);
    line-height:20px;
}
.selectDiscountSource{
    margin-top: 15px;
}
.selectDiscountSource span{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(169,174,192,1);
    line-height:20px;
}
.use{
    text-align: center;
    margin-top: 100px;
}
.use button{
    width: 95%;
}
</style>